<template>
  <div class="home">
    <!-- <HelloWorld msg="Vue.js"/> -->
    <div>{{ food }}</div> <br>
    <button @click="goBack">返回上一页</button>
    <button @click="handlClick('push')">跳转到parent页</button>
    <button @click="handlClick('replace')">跳转到parent页</button>
    <button @click="getInfo">请求数据</button>
    <br>
    <img :src="imgUrl">
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import { getUserList } from '@/api/user.js'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  props: {
    food: {
      type: String,
      default: 'orange'
    }
  },
  data () {
    return {
      imgUrl: ''
    }
  },
  beforeRouteEnter (to, from, next) {
    // 该方法无法获取this
    // console.log(to) 当前页面
    // console.log(from) 上一个页面
    // next()
    // 要用this实例的写法
    next(vm => {
      // console.log(vm)
    })
  },
  // beforeRouteLeave (to, from, next) {
  //   const leave = confirm('您确定要离开吗？')
  //   if (leave) next()
  //   else next(false)
  // },
  methods: {
    goBack () {
      // this.$router.go(-1)
      this.$router.back()
    },
    handlClick (type) {
      // if (type == 'push') this.$router.push('/parent')
      if (type === 'push') {
        const name = '345'
        this.$router.push({
          // path: '/parent',
          // query: {
          //   name: '123'
          // }
          // name: 'argu',
          // params: {
          //   name: '234'
          // }
          path: `/argu/${name}`
        })
      } else if (type === 'replace') {
        this.$router.replace({
          name: 'parent'
        })
      }
    },
    getInfo () {
      getUserList().then(res => {
        console.log(res)
        this.imgUrl = res.img
      })
    }
  }
}
</script>
